import React from 'react';
import {Transfer, Switch, Button} from 'antd';

const dataSource = [];
for (let i = 0; i < 20; i++) {
  dataSource.push({
    key: i.toString(),
    title: `内容${i}`,
    description: `描述与内容${i}`,
    disabled: i % 3 < 1,
  });
}

const targetKeys = dataSource.filter(item => +item.key % 3 > 1).map(item => item.key);

export default class App extends React.Component {
  state = {
    targetKeys: targetKeys,
    selectedKeys: [],
    disabled: false,
  };

 
  shouldComponentUpdate(nextProps, nextState) {
    console.log(this.state, "this.state")
    return true
  }

  handleChange = (nextTargetKeys, direction, moveKeys) => {
    this.setState({targetKeys: nextTargetKeys});
    console.log('targetKeys: ', nextTargetKeys);
    console.log('direction: ', direction);
    console.log('moveKeys: ', moveKeys);
  };

  handleSelectChange = (sourceSelectedKeys, targetSelectedKeys) => {
    this.setState({selectedKeys: [...sourceSelectedKeys, ...targetSelectedKeys]});
    console.log('sourceSelectedKeys: ', sourceSelectedKeys);
    console.log('targetSelectedKeys: ', targetSelectedKeys);
  };

  handleScroll = (direction, e) => {
    console.log('direction:', direction);
    console.log('target:', e.target);
  };

  handleDisable = disabled => {
    this.setState({disabled});
  };

  render() {
    const {targetKeys, selectedKeys, disabled} = this.state;
    return (
      <div>
        <Transfer
          locale={{itemUnit: '项', itemsUnit: '项', searchPlaceholder: '请输入搜索内容'}}
          titles={['待选用户', '已选用户']}
          dataSource={dataSource}
          targetKeys={targetKeys}
          selectedKeys={selectedKeys}
          onChange={this.handleChange}
          onSelectChange={this.handleSelectChange}
          onScroll={this.handleScroll}
          render={item => item.title}
          disabled={disabled}
        />
        <Switch
          unCheckedChildren="disabled"
          checkedChildren="disabled"
          checked={disabled}
          onChange={this.handleDisable}
          style={{marginTop: 16}}
        />
      </div>
    );
  }
}
